<template>
    <h1> app vue3 学习</h1>

    <ul>
        <li>vue</li>
        <li>react</li>
        <li> node </li>
    </ul>

    <div class="container">
        <p>X 轴：{{ x }} Y 轴：{{ y }}</p>
        <hr />
        <div>
            <p>{{ count }}</p>
            <button @click="add()">自增</button>
        </div>
    </div>

    <hr>
    <div> {{ msg }}</div>

</template>

<script>
export default {

    // setup () {
    //     const msg = 'vue3'
    //     // console.log('count', this.count)  // 错误写法
    //     return {
    //         msg
    //     }
    // },

    // vue2 的写法
    data () {
        return {
            x: 0,
            y: 0,
            count: 10
        }
    },

    mounted () {
        document.addEventListener('mousemove', this.move)

        console.log(this.msg)
    },
    methods: {
        add () {
            this.count++;



        },
        move (e) {
            this.x = e.clientX;
            this.y = e.clientY
        }
    }

}
</script>





